<template>
  <button
    class="el-button"
    :class="[
      localSize ? `el-button--${localSize}` : '',
      type ? `el-button--${type}` : '',
    ]"
  >
    <slot />
  </button>
</template>
<script lang="ts">
export default {
  name: "ElButton",
};
</script>
<script setup lang="ts">
import { computed, withDefaults } from "vue";
import { useGlobalConfig } from "../../utils/useGlobalConfig";
interface Props {
  size?: "" | "small" | "medium" | "large";
  type?: "" | "primary" | "success" | "danger";
}
const props = withDefaults(defineProps<Props>(), {
  size: "",
  type: "",
});
const localSize = computed(() => {
  return props.size || useGlobalConfig().size;
});
</script>
<style lang="scss">
@import "../../styles/mixin";
@include b(button) {
  display: inline-block;
  cursor: pointer;
  background: $--button-default-background-color;
  color: $--button-default-font-color;
  @include button-size(
    $--button-padding-vertical,
    $--button-padding-horizontal,
    $--button-font-size,
    $--button-border-radius
  );
  @include m(primary) {
    @include button-background(
      $--button-primary-border-color,
      $--button-primary-font-color,
      $--button-primary-background-color
    )
  }
  @include m(success) {
    @include button-background(
      $--button-success-border-color,
      $--button-success-font-color,
      $--button-success-background-color
    )
  }
  @include m(warning) {
    @include button-background(
      $--button-warning-border-color,
      $--button-warning-font-color,
      $--button-warning-background-color
    )
  }
  @include m(danger) {
    @include button-background(
      $--button-danger-border-color,
      $--button-danger-font-color,
      $--button-danger-background-color
    )
  }
  @include m(small) {
    @include button-size(
      $--button-small-padding-vertical,
      $--button-small-padding-horizontal,
      $--button-small-font-size,
      $--button-small-border-radius
    );
  }
  @include m(large) {
    @include button-size(
      $--button-large-padding-vertical,
      $--button-large-padding-horizontal,
      $--button-large-font-size,
      $--button-large-border-radius
    );
  }
}
</style>
